﻿@{
    ViewData["Title"] = "滑动验证码";
}

<link rel="stylesheet" href="~/lib/lazy-slide-captcha/dist/lazy-slide-captcha.css" asp-append-version="true" />

<style>
    #app {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .panel {
        padding: 20px;
        box-shadow: inherit;
        border-radius: 6px;
        box-shadow: 0 0 4px 0 #999999;
        /*margin-top: 100px;*/
    }
</style>

<div id="app">
    <div class="panel">
        <lazy-slide-captcha ref="captcha" :width="width" :height="height" :show-refresh="true" :fail-tip="failTip" :success-tip="successTip" @@finish="handleFinish" @@refresh="generate"></lazy-slide-captcha>
    </div>
</div>


@section Scripts{
    <script src="~/lib/vue/vue.min.js"></script>
    <script src="~/lib/vue/axios.min.js"></script>
    <script src="~/lib/lazy-slide-captcha/dist/lazy-slide-captcha.umd.js"></script>

    <script>
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    requestId: undefined,
                    failTip: '',
                    successTip: '',
                    // width，height保持与552 * 344同比例即可
                    width: 340,
                    height: 212
                }
            },
            mounted() {
                this.generate()
            },
            methods: {
                generate() {
                    // 改变内部状态，标识生成请求开始
                    this.$refs.captcha.startRequestGenerate()

                    axios.get('@(Url.Action("Generate"))')
                        .then((response) => {
                            this.requestId = response.data.Id;
                            parent.window.SetCaptchaId(response.data.Id);
                            // 改变内部状态，标识生成请求结束，同时设定background，slider图像
                            this.$refs.captcha.endRequestGenerate(response.data.BackgroundImage, response.data.SliderImage)
                        })
                        .catch((error) => {
                            console.log(error);
                            // 标识生成请求结束
                            this.$refs.captcha.endRequestGenerate(null, null)
                        });
                },
                handleFinish(data) {
                    // 改变内部状态，标识验证请求开始
                    this.$refs.captcha.startRequestVerify()
                    //data.id = this.requestId;
                    //      axios.post(`/api/captcha/check?id=${this.requestId}`, data)
                    //console.log(data)
                    const id = this.requestId;
                    abc.post({
                        url: `@(Url.Action("Validate"))`,
                        data: {
                            id: id,
                            trackJson: JSON.stringify(data)
                        },
                        isFurionResult:false,
                        done: (response) => {
                            let success = response.Result === 0
                            // 验证失败时显示信息
                            this.failTip = response.Result == 1 ? '验证未通过，拖动滑块将悬浮图像正确合并' : '验证超时, 请重新操作'
                            // 验证通过时显示信息
                            this.successTip = '验证通过，超过80%用户'
                            // 改变内部状态，标识验证请求结束，同时设定是否成功状态
                            this.$refs.captcha.endRequestVerify(success)

                            if (!success) {
                                setTimeout(() => {
                                    this.generate()
                                }, 1000)
                            }else{
                                //成了准备跳转
                                //去执行登录
                                console.log(parent.window)
                                parent.window.CaptchaValidateSuccess(id);
                            }
                        },
                        error: () => {
                            console.log(error);
                            this.failTip = '服务异常，请稍后重试'
                            // 标识验证请求结束
                            this.$refs.captcha.endRequestVerify(false)
                        }
                    });
                    //axios.post(`@(Url.Action("check"))?id=${this.requestId}`, data)
                    //    .then((response) => {
                    //        let success = response.data.result === 0
                    //        // 验证失败时显示信息
                    //        this.failTip = response.data.result == 1 ? '验证未通过，拖动滑块将悬浮图像正确合并' : '验证超时, 请重新操作'
                    //        // 验证通过时显示信息
                    //        this.successTip = '验证通过，超过80%用户'
                    //        // 改变内部状态，标识验证请求结束，同时设定是否成功状态
                    //        this.$refs.captcha.endRequestVerify(success)

                    //        if (!success) {
                    //            setTimeout(() => {
                    //                this.generate()
                    //            }, 1000)
                    //        }
                    //    })
                    //    .catch((error) => {
                    //        console.log(error);
                    //        this.failTip = '服务异常，请稍后重试'
                    //        // 标识验证请求结束
                    //        this.$refs.captcha.endRequestVerify(false)
                    //    });
                }
            }
        });
    </script>
}
